<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script src="js/jquery-1.11.0.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .quan{
            width: 100%;
            height: 800px;
            background-color: rgba(128, 128, 128, 0.216);
            position: relative;
            cursor: pointer;
        }
        .zhu{
    width: 422px;
    height: 420px;
   border: 1px solid gray;
position: absolute;
left: 580px;
top: 150px;
    display: flex;

    position: relative;
    z-index: 999;
    background-color: #fff;

}

.lmn{
    width: 100%;
    height: 80px;
  
    
    display: flex;
}

.lmn1{
    width: 160px;
    height: 30px;
    background-color: #e8e9eb;
    border-radius: 15px;
    margin-right: 30px;
    margin-top: 25px;
    margin-left: 20px;
    text-indent: 35px;
    line-height: 30px;
    font-size: 16px;
}
.lmn2{
    width: 160px;
    height: 30px;
    font-size: 15px;
    text-indent: 35px;
    line-height: 30px;
    background-color: #e8e9eb;
    margin-top: 25px;
    border-radius: 15px;
    margin-left: 20px;
    margin-right: 30px;
}

.nhb{
    width: 317px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 80px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}
.wbko{
    width: 217px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 140px;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}
.ccx{
    width: 100px;
    height: 42px;
    color: brown;
    font-size: 16px;
    display: inline-block;
    position: absolute;
    left: 268px;
    top: 140px;
    border-radius: 0 20px 20px 0;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}

.nhbo{
    width: 317px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 200px;
    border-radius: 20px;
    font-size: 24px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    background-color: grey;
    border: 1px solid gray;
}
.nhb2{
    width: 317px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 80px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}
.wbko2{
    width: 217px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 140px;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}
.ccx2{
    width: 100px;
    height: 42px;
    color: brown;
    font-size: 16px;
    display: inline-block;
    position: absolute;
    left: 268px;
    top: 140px;
    border-radius: 0 20px 20px 0;
    font-size: 14px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    border: 1px solid gray;
}

.nhbo2{
    width: 317px;
    height: 42px;
    display: inline-block;
    position: absolute;
    left: 50px;
    top: 200px;
    border-radius: 20px;
    font-size: 24px;
    line-height: 42px;
    text-align: center;
    border: none;
    outline: none;
    background-color: grey;
    border: 1px solid gray;
}
.jnm{
    width: 300px;
    height: 40px;
 
    position: absolute;
    left: 50px;
    bottom: 80px;
}
.qas{
    color: red;
} 

#bvf{
    position: absolute;
    left: 0px;
    top: 0px;
}


    </style>


</head>
<body>
<div id="cfg" class="quan">
    <div class="zhu">
           <div class="lmn">
            <div class="lmn1"> 新用户注册 </div>
            <div id="vgh" class="lmn2"> 直接登陆 </div>
           </div>

        <input class="nhb" type="text" placeholder="请输入手机号">
        <input class="wbko" type="text" placeholder="请输入短信验证码">
        <input class="ccx" type="button" value="获取验证码">
        <input class="nhbo" type="button" value="注册">
   
   <div class="jnm">  <input type="checkbox"> 我同意e宠 <span class="qas">《用户协议声明》</span></div>
    </div>  
</div>
  

<!-- // -->

<div id="bvf" class="quan">
    <div class="zhu">
           <div class="lmn">
            <div  class="lmn1"> 手机验证码登录 </div>
            <div id="vgc" class="lmn2"> 账户登陆 </div>
           </div>

<input class="nhb2" type="text" placeholder="请输入手机号/账号">
<input class="wbko2" type="text" placeholder="请您输入密码">
<input class="ccx2" type="button" value="获取验证码">
 <input class="nhbo2" type="button" value="登录">
   
   <div class="jnm">  <input type="checkbox"> 我同意e宠 <span class="qas">《用户协议声明》</span></div>
    </div>
    
</div>



<script>
var oquan=document.getElementsByClassName("quan");
var olmn2=document.getElementsByClassName("lmn2");
var olmn1=document.getElementsByClassName("lmn1");
var ocfg=document.getElementById("cfg")
var obvf=document.getElementById("bvf")

var ovgh=document.getElementById("vgh")
var ovgc=document.getElementById("vgc")

var onhb=document.querySelector(".nhb")
//console.log(onhb)
var owbko=document.querySelector(".wbko")
var occx=document.querySelector(".ccx")
var onhbo=document.querySelector(".nhbo")

var onhb2=document.querySelector(".nhb2")
//console.log(onhb)
var owbko2=document.querySelector(".wbko2")
var occx2=document.querySelector(".ccx2")
var onhbo2=document.querySelector(".nhbo2")
var opd=document.querySelector(".nhbo2")
var ospan = document.querySelectorAll(".pd");

ovgh.onclick=function () {
  ocfg.style.display="none"

  obvf.style.display="block"
}
ovgc.onclick=function(){
  obvf.style.display="none"
  ocfg.style.display="block"

} 

      /* $(".nhbo").on("click",function(){
        if($(".nhb").val()==""||$(".wbko").val()==""){
            alert("用户名不能为空")
        }else{
            $.get("http://jx.xuzhixiang.top/ap/api/reg.php",{
                username:$(".nhb").val(),
                password:$(".wbko").val(),
            }).then((resData)=>{
                console.log(resData)
                if(resData.code==1){
                    alert("注册成功")
                }else{
                    alert("注册失败")
                }
            })
        }
      }); */

     /*  $(".nhbo2").on("click",function(){
        if($(".nhb2").val()==""||$(".wbko2").val()==""){
            alert("不能为空，请输入用户名或密码")
        }else{
            $.get("http://jx.xuzhixiang.top/ap/api/login.php",{
                username:$(".nhb2").val(),
                password:$(".wbko2").val(),
            }).then((resData)=>{
                console.log(resData)
                if(resData.code==1){
                    alert("登陆成功") */
                   /*  console.log(resData) */   //这里打印可以得到用户id  和token返回值
                  /*   location.assign('index.html')   //为了跳转页面
                }else{
                    alert("登录失败，请确认用户名和密码是否正确")
                }
            })
        }
      }) */

//上面的接口是用千锋提供的后端接口   下面来一个自己搞的
$(".nhbo").on("click",function(){    //nhbo是注册按钮  nhb是输入账户的文本框    wbko是输入验证码的文本框
    if($(".nhb").val()==""||$(".wbko").val()==""){    //先判断文本框的值是否为空值  
        alert("用户名或验证码不能为空");
    }else{  //不为空就调用户接口，
        var cont=0;
        axios.get("http://localhost:3000/users").then(function(resData){
            for(let i=0;i<resData.data.length;i++){
                if($(".nhb").val()!=resData.data[i].username){
                    cont++;
                }
            }
            if(cont==resData.data.length){
                axios.post("http://localhost:3000/users",{
                    id:$,
                    username:$(".nhb").val(),
                    password:$(".wbko").val(),
                }).then((resData)=>{
                    console.log(resData);
                });
                alert("注册成功");
            }else{
                alert("用户名已存在")
            }
        })
    }
})


$(".nhbo2").on("click",function(){   //nhbo2是登录键，点击的时候触发函数。
    if($(".nhb2").val()==""||$(".wbko2").val()==""){   //nhb2是账号框  wbko2是密码
        alert("账号或密码不能为空，请输入账号密码");
    }else{
        var cont=0;
        axios.get("http://localhost:3000/users").then(function(resData){
            for(let i=0;i<resData.data.length;i++){
                if($(".nhb2").val()!=resData.data[i].username&&$(".wbko2").val()!=resData.data){
                    cont++;
                }
            }
            console.log(cont);
            if(cont==resData.data.length){
                alert("用户名或密码不正确");
            }else{
                alert("登录成功");
    
             location.assign('index.html') 
            }
        });
    }
})
      
</script>
</body>
</html>